VSCode 拡張開発 入門① 環境構築 ~ HelloWorld
May 22, 2020
この記事は1年以上が経過しています。内容が古い可能性があります。
目次
事前準備
あたりまえですが、VSCode は必要です。 Download Visual Studio Code - Mac, Linux, Windowsからダウンロードする
それと、Node.js(npm)が必要なのでインストール済みであること
公式サイト
以下リポジトリには実装のサンプルコードがあります。
環境構築
インストール
VSCode 拡張の雛形生成には Yomen を使用します。 下記コマンドで yoment と generator をインストールします。
npm install -g yo generator-code
HelloWorld
generator-code
でコード生成するだけで、コマンド実行で Info(通知)に「HelloWorld」と表示するコードを生成できます。
雛形生成
とりあえず試してみましょう。
yo code
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? Hello
? What's the identifier of your extension? hello
? What's the description of your extension?
? Initialize a git repository? Yes
? Which package manager to use? yarn
yo code
を実行するとまずはじめに、どのタイプの拡張を生成するか聞かれます。
今回は、New Extension (TypeScript)
を選択します。
その後は、エクステンション名やパッケージマネジャーなどを聞かれます。
適当に入力します。
フォルダ構成
yo code
を実行すると下記フォルダとファイルが生成されます。
.
├── .gitignore
├── .vscode
├── .vscodeignore
├── out
├── src
│ ├── extension.ts
│ └── test
│ ├── runTest.ts
│ └── suite
│ ├── extension.test.ts
│ └── index.ts
├── package.json
├── tsconfig.json
├── vsc-extension-quickstart.md
├── CHANGELOG.md
├── README.md
└── yarn.lock
主にsrc
フォルダとpackage.json
が編集するファイルになります。
src/extension.ts
: エクステンションの実装をこのファイルに記述します。src/test
: テストの実装をしますpackage.json
: コマンド・イベントなどの記述をする
起動してみる
アクティビティーバーのデバックアイコンもしくはF5
から起動します。
cmd + Shift + p
でHello World
を選択すると、info が表示されます。
※gif の速度が早く、わかりにくくてすいません。。。